<template>
  <div class="mt-list">

    <div class="mt-list-filter">
      <el-row>
        <el-col :span="6">
          <div class="filter-text">共有{{ this.filterList.length }}项筛选条件</div>
        </el-col>
        <el-col :span="18">
          <div class="mt-list-filter-btn">
            <mt-button @click="readList">搜索</mt-button>
            <mt-button @click="openDialog">自定义筛选</mt-button>
            <mt-button type="submain">重置</mt-button>
            <mt-button @click="openConfigDialog">自定义列表</mt-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="mt-list-table">
      <el-table
        :data="list"
        :height="tableHeight"
        class="table">
        <el-table-column
          v-for="item in listConfig"
          :key="item.key"
          :prop="item.key"
          :label="item.label"
          :min-width="item.minWidth">
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100">
          <template v-slot="scope">
            <mt-button type="table" @click="createDetail(scope.row)">查看报告</mt-button>
            <!-- <mt-button v-if="scope.row.berryFuYouPdfUrl" type="table" @click="goDetail(scope.row)">详情</mt-button>
            <mt-button v-else type="table" @click="createDetail(scope.row)">生成报告</mt-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="mt-list-footer">
      <div class="totaldata">共{{ total }}条</div>
      <div class="page">
        <el-pagination
          style="float: right"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :total="total"
          background
          :layout="pageLayout"
          class="mt-page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

    <filter-dialog ref="filterDialog" :type="this.type" @submit="handleSubmit"></filter-dialog>
    <config-dialog ref="configDialog" :type="this.type" @submit="changeList"></config-dialog>
    <pdf-dialog ref="pdfDialog" @refresh="readList"></pdf-dialog>

  </div>
</template>
<script>
import filterDialog from "../filter/dialog.vue";
import configDialog from "./configList.vue";
import PdfDialog from "@/components/pdf.vue";
import { listMixin } from "@/mixins/list-mixins";

export default {
  name: "DynamicPageList",

  data () {
    return {
      type: "",
      filterList: [], // 筛选条件
      list: [],
      listConfig: []
    };
  },

  components: {
    filterDialog,
    configDialog,
    PdfDialog
  },

  mixins: [ listMixin ],

  computed: {
  },

  async created () {
    this.type = this.$route.meta.dynamicType;
    if (!this.type) {
      this.$mtMessage.error("无法识别页面动态参数!");
      return;
    }

    this.getHeaderList();
    this.readList();
  },

  methods: {
    /* 获取列表 */
    async readList () {
      console.log("filterList", this.filterList);
      const list = this.filterList.map(i => {
        return {
          label: i.label,
          key: i.key,
          condition: i.condition,
          value: [i.value]
        };
      });
      const params = {
        list,
        deviceNumber: SETTING.deviceNumber[this.type],
        pageNum: this.page,
        pageSize: this.pageSize
      };
      this.$request.post(this.API.GET_DEVICES_LIST, params).then(res => {
        if (res.success) {
          this.list = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    /* 获取列表配置 */
    async getHeaderList () {
      const params = { deviceNumber: SETTING.deviceNumber[this.type] };
      this.$request.post(this.API.GET_HEADING_LIST, params).then(res => {
        if (res.success) {
          this.listConfig = [];
          this.listConfig = res.data.fixedList.map(i => {
            return { ...i, minWidth: 120 };
          });
          res.data.deviceList.forEach(i => {
            if (i.status === "1") {
              this.listConfig.push({
                label: i.label,
                key: i.key,
                minWidth: 120
              });
            }
          });
        }
      });
    },

    /* 前往详情 */
    goDetail (row) {
      window.location = row.berryFuYouPdfUrl + "AUK_1902528878224740352";
    },
    /* 生成报告 */
    createDetail (row) {
      // this.$refs.pdfDialog.pdfUrl = row.pdfUrl + "AUK_1902528878224740352";
      this.$refs.pdfDialog.pdfUrl = row.pdfUrl;
      this.$refs.pdfDialog.id = row.id;
      this.$refs.pdfDialog.openPdf();
    },

    /* 打开筛选 */
    openDialog () {
      this.$refs.filterDialog.open();
    },
    /* 筛选提交 */
    handleSubmit (list) {
      console.log("filterList:", list);
      this.filterList = list;
      this.readList();
    },
    /* 重置筛选 */
    resetSearch () {
      this.filterList = [];
      this.readList();
    },

    /* 打开列表配置 */
    openConfigDialog () {
      this.$refs.configDialog.open();
    },
    /* 列表配置提交 */
    changeList (list) {
      this.listConfig = list.map(i => {
        return {
          key: i.key,
          label: i.label,
          minWidth: i.width
        };
      });
      this.readList();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mt-list.scss";
.mt-list {
  &-filter {
    .filter-text {
      color: #909399;
      font-size: 14px;
      height: 30px;
      line-height: 30px;;
    }
  }
}
</style>
